<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('科室转机构')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dept-add">
        <input id="treeId" name="parentId" type="hidden" th:value="${dept.deptId}"/>

        <!--添加此控件 会影响数据库自定起始位 -->
        <div class="form-group" shiro:hasAnyRoles="admin">
            <label class="col-sm-3 control-label">机构编号：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="deptId" id="deptId" >
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 不填写按系统自动生成</span>
            </div>
        </div>

        <!--选择科室-->
        <div class="form-group">
            <label class="col-sm-3 control-label">科室：</label>
            <div class="col-sm-8">
                <select name="departmentId" class="form-control" >
                    <!--<option value="">------</option>-->
                    <option th:each="l : ${department}" th:text="${l.deptName}" th:value="${l.deptId}"></option>
                </select>
                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 医院的估计</span>-->
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">上级机构：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" onclick="selectDeptTree()" id="treeName" readonly="true"
                           th:value="${dept.deptName}">
                    <span class="input-group-addon"><i class="fa fa-search" onclick="selectDeptTree()"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">机构名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="deptName" id="deptName" maxlength="30" required>
            </div>
        </div>
        <div class="form-group" shiro:hasAnyRoles="admin">
            <label class="col-sm-3 control-label is-required">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" value="1">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">管理员账号：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="deptLoginName" maxlength="30" minlength="3" required>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 管理员默认密码:<span th:text="${@config.getKey('sys.user.initPassword')}"></span></span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">创建管理员：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('yf_creat_operator')}">
                    <input type="radio" th:id="${'status_' + dict.dictCode}" name="isCreateAdminUserBoo" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">迁移旧科室：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('yf_migration_operator')}">
                    <input type="radio" th:id="${'status_' + dict.dictCode}" name="isMedicalWasteTransferBoo" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 是否迁移曾经科室产生的医废</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">负责人：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="leader">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系电话：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="phone">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邮箱：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="email">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">等级：</label>
            <div class="col-sm-8">
                <select name="hospitalGrade" class="form-control "
                        th:with="type=${@dict.getType('yf_hospital_grade')}">
                    <!--<option value="0">---地区---</option>-->
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 医院的估计</span>-->
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">机构类型：</label>
            <div class="col-sm-8">
                <select name="deptType" id="deptType" class="form-control "
                        th:with="type=${@dict.getType('DEPT_TYPE')}">
                    <option value="">请选择机构类型</option>
                    <option class="deptType" th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
              <!--  <span class="help-block m-b-none prompt-contract" style="display: none"><i
                        class="fa fa-info-circle"></i> 添加暂存点前请先完善<a
                        style="text-decoration: underline;color: #0000CC;" href="javascript:void(0)"
                        onclick="openContract()">医废处置单位合同</a>信息</span>-->
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">状态：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                    <input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label  is-required">城市：</label>
            <div class="form-inline">
                <div class="col-sm-8">
                    <select id="province" name="districts" data-i="0" class="form-control ">
                        <option value=0>---- 选择省 ----</option>
                    </select>
                    <select id="city" name="districts" data-i="1" class="form-control ">
                        <option value=0>---- 选择市 ----</option>
                    </select>
                    <select id="districtsId" name="districts" data-i="2" class="form-control ">
                        <option value=0>---- 选择区 ----</option>
                    </select>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 此参数统计区域下医院数据,请填写</span>
                </div>
            </div>
        </div>


        <div class="form-group" style="display: none;" name="hosp_select">
            <label class="col-sm-3 control-label">logo：</label>
            <div class="col-sm-8">
                <!--<input name="rTPath" class="form-control" type="text">-->
                <input id="logo" name="logo" type="file" multiple accept="image/png,image/jpeg">
            </div>
        </div>

        <div class="form-group" style="display: none;" name="hosp_select">
            <label class="col-sm-3 control-label">地理坐标：</label>
            <div class="col-sm-8" id="coordinates">
                <input name="coordinates" class="form-control" type="text" readonly>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i></span>
            </div>
        </div>

        <div style="height: 250px;width: 85%;margin: auto;display: none;" id="allmap" name="hosp_select"></div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

<script type="text/javascript" th:src="${@config.baiduKey()}"></script>
<script type="text/javascript" th:src="@{/leshu/baidu/init.js}"></script>
<script type="text/javascript" th:src="@{/leshu/plug/selectCity.js}"></script>
<script th:src="@{/ajax/libs/distpicker/distpicker.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "system/dept";
    var codeurl = ctx + "system/districts/list"
    var dept = [[${dept}]];

    $.selectDeptType(130);

    console.log(dept)

    //选择医院 显示logo、显示地理坐标、
    $("select[name='deptType']").change(function (event) {
        var hosId = $(event.target).val();
        if (hosId >= 220 && hosId < 400) {
            $("div[name='hosp_select']").show();
        } else {
            $("div[name='hosp_select']").hide();
        }
    });

    $(function () {
        //初始化城市列表
        $.initcity(codeurl);
        //加载logo图片上传
        initFileInput("logo");
    });

    function openContract() {
        let contractUrl = ctx + "yf/medicalHospitalRelationship/addOrEdit/" + dept.deptId;
        $.modal.open("医疗废物处理合同", contractUrl);
    }


    var dept_id = -1, option = {
        language: 'zh', //设置语言
        theme: 'explorer-fas',
        uploadUrl: prefix + "/uploadLogo",
        deleteUrl: prefix + '/delLogo',
        dropZoneEnabled: false,
        autoReplace: true,
        allowedPreviewTypes: ['image'],
        overwriteInitial: false,
        layoutTemplates: {
//            actionDelete: '', //去除上传预览的缩略图中的删除图标
//            actionUpload: '',//去除上传预览缩略图中的上传图片；
            size: '',//去除文件大小
            footer: '<div class="file-thumbnail-footer" style="height: 10px">\n' +
                '     {actions}\n' +
                '</div>',//去除底部
            actions: '<div class="file-actions">\n' +
                '    <div class="file-footer-buttons">\n' +
                '        {upload} {delete} {zoom} {other}' +
                '    </div>\n' +
                '    <div class="clearfix"></div>\n' +
                '</div>',
            progress: '<div class="progress">\n' +
                '    <div class="progress-bar progress-bar-success progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
                '        {status}\n' +
                '     </div>\n' +
                '</div>',
            actionZoom: '',   //去除上传预览缩略图中的查看详情预览的缩略图标。
        },
        showCaption: false, //是否显示标题
        showClose: false,    //是否显示关闭按钮
//        showPreview: true,//显示预览
//        showBrowse: true,//显示浏览按钮
        showRemove: true,//显示移除按钮
        maxFileCount: 1,//表示允许同时上传的最大文件个数
        showUpload: false,//是否显示上传按钮
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        uploadExtraData: function (previewId, index) {
            return {'did': dept_id};
        },
        deleteExtraData: function (previewId, index) {
            return {'did': dept_id};
        }
    }


    // 初始化 预览 图片
    function initFileInput(ctrlName) {
        //上传logo文件
        $("#" + ctrlName).fileinput(option)
            //上传成功后处理方法
            // .on("fileuploaded", function (event, data, previewId, index) {
            // })
            // //选择文件后处理事件
            // .on("filebatchselected", function (event, files) {
            //     //文件上传方法
            //     //                $("#logo").fileinput("upload");
            // })
            // 异步上传成功结果处理
            .on("fileuploaded", function (event, data, previewId, index) {
                if (data.response.code == 200)
                    layer.msg("logo上传成功！", {icon: 1}); else layer.msg("图片上传失败", {icon: 2})
            })
            // 异步上传错误结果处理
            .on('fileerror', function (event, data, msg) {
                layer.msg(data.response, {icon: 2})
            });
    }

    function submitHandler() {
        console.log($("#deptType").val());
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/transitionHospital", $('#form-dept-add').serialize() + "&" + $.param({
                "districtsId": $.getCityValue()
            }), function (res) {
                console.log(res)
                // if (dept_id > 0) {
                //     dept_id = res.data
                //     $("#logo").fileinput('upload');
                // }
            });
        }
    }


    //自定义正则表达示验证方法
    $.validator.addMethod("coordinates", function (value, element, params) {
        var GPS = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)+,(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)+$/;
        return this.optional(element) || (GPS.test(value));
    }, "*请输入正确坐标！");

    $.validator.addMethod("districts", function (value, element, params) {
        var districts = /^(?!0)\d+$/gm;
        return this.optional(element) || (districts.test(value));
    }, "*请选择归属城市！");


    $.validator.addMethod("deptIds", function (value, element, params) {
        var districts = /^\d{8,15}$/gm;
        return this.optional(element) || (districts.test(value));
    }, "*填写8-15位数字！");

    //
    $("#form-dept-add").validate({
        onkeyup: false,
        rules: {
            deptName: {
                remote: {
                    url: prefix + "/checkDeptNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "parentId": function () {
                            return $("input[name='parentId']").val();
                        },
                        "deptName": function () {
                            return $.common.trim($("#deptName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            deptId: {
                deptIds: true
            },
          /*  deptType: {
                required: true,
                dept_rex: true,
            },*/
            orderNum: {
                required: false,
                digits: true
            },
            email: {
                required: false,
                email_rex: true,
            },
            phone: {
                required: false,
                isPhone: true,
            },
            coordinates: {
                required: false,
                coordinates: true,
            },
            districts: {
                required: true,
                districts: true
            }
        },
        messages: {
            "deptName": {
                remote: "机构已经存在"
            },
            "deptType": {
                remote: "请先完善医废处置合同"
            },
            districts: {
                remote: "请选择归属城市"
            }
        },
        focusCleanup: true
    });
    //机构类型 自定义验证方法
    $.validator.addMethod("dept_rex", function (value, element, params) {
        let boo = false;
        if (value === '400') {
            $.ajax({
                url: ctx + "yf/medicalHospitalRelationship/checkMedicalWasteContract",
                async: false,
                type: 'post',
                dataType: 'json',
                data: {
                    deptId: dept.deptId
                },
                success: function (res) {
                    if (res === '1')
                        boo = true;else boo = false;
                }
            });
            return this.optional(element) || (boo);
        }
        return this.optional(element) || true;
    }, "请完善合同");


    //地理坐标 自定义正则表达示验证方法
    $.validator.addMethod("email_rex", function (value, element, params) {
        var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        return this.optional(element) || (reg.test(value));
    }, "*请输入正确邮箱！");


    /*机构管理-新增-选择父机构树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var options = {
            title: '机构选择',
            width: "380",
            url: prefix + "/selectDeptTree/" + treeId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            //获取值
            let nobed = tree.getSelectedNodes()[0];
            //动态设置类型权限
            $.selectDeptType(nobed.type);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }
</script>
</body>
</html>
